import React from 'react'
import { Input, Select, DatePicker } from 'antd'
import TableFilter, { FilterItemConfig } from './index'

const { RangePicker } = DatePicker

// 示例组件，展示如何使用TableFilter
const TableFilterExample: React.FC = () => {
  // 定义过滤器配置
  const filters: FilterItemConfig[] = [
    {
      key: 'name',
      label: '用户姓名',
      type: 'input',
      placeholder: '请输入用户姓名',
      component: <Input placeholder="请输入用户姓名" allowClear />,
    },
    {
      key: 'phone',
      label: '手机号码',
      type: 'input',
      placeholder: '请输入手机号码',
      component: <Input placeholder="请输入手机号码" allowClear />,
    },
    {
      key: 'status',
      label: '订单状态',
      type: 'select',
      placeholder: '请选择订单状态',
      component: (
        <Select
          placeholder="请选择订单状态"
          allowClear
          options={[
            { label: '待审核', value: 0 },
            { label: '已审核', value: 1 },
            { label: '已完成', value: 2 },
            { label: '已取消', value: 3 },
          ]}
        />
      ),
    },
    {
      key: 'createdTime',
      label: '下单时间',
      type: 'dateRange',
      span: 16, // 日期范围选择器占用更多空间
      component: <RangePicker style={{ width: '100%' }} />,
    },
    {
      key: 'address',
      label: '用户地址',
      type: 'input',
      component: <Input placeholder="请输入用户地址" allowClear />,
    },
  ]

  // 处理搜索
  const handleSearch = (values: Record<string, any>) => {
    console.log('搜索参数:', values)
    // 这里可以调用API进行数据查询
    // 例如: apis.apply.Page({ params: values })
  }

  // 处理重置
  const handleReset = () => {
    console.log('重置过滤器')
    // 可以在这里重置表格数据或执行其他操作
  }

  return (
    <div>
      <h2>表格过滤器示例</h2>
      <TableFilter
        filters={filters}
        onSearch={handleSearch}
        onReset={handleReset}
        initialValues={{ status: 0 }} // 设置初始值
        defaultCollapsed={true} // 默认折叠状态
      />
      {/* 表格组件将在这里 */}
      <div
        style={{ padding: '20px', background: '#f0f2f5', marginTop: '16px' }}
      >
        表格内容区域
      </div>
    </div>
  )
}

export default TableFilterExample
